<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item @click="goDetails(item.id)" v-for="item in swiperImages" :key="item.id">
			<view class="swiper-item">
				<image class='swiper-img' :src="item.url" mode=""></image>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				swiperImages: [{
					url: '/static/img/index-img/erji.jpg',
					name: '耳机',
					id: 0
				}, {
					url: '/static/img/index-img/jianguo.jpg',
					name: '坚果',
					id: 1
				}, {
					url: '/static/img/index-img/zhijin.png',
					name: '纸巾',
					id: 2
				}]
			}
		},
		methods: {
			// 跳转详情页面(optionId：当前图片所对应的攻略ID)
			goDetails(optionId) {
				console.log("跳转")
				uni.navigateTo({
					url: `/pages/strategy/index?bannerId=${optionId}`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: 'data from starter page'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	swiper {
		width: 98%;
		height: 400rpx;
		margin: 0 auto;
		border: 1px solid yellowgreen;
		/* 添加圆角 */
		border-radius: 8px;
		/* 添加阴影效果 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.swiper-img {
		width: 100%;
		height: 400rpx;
	}
</style>